<template>
  <div>
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['设备管理', '设备点巡检']" currentMenu="点巡检项目"></crumbs>
    <a-card :bordered="false" style="height: 100%; margin-top: 12px">
      <a-button @click="handleShowFilter" icon="filter"
        >筛选 <span class="filter-num" style="margin-left: 5px">{{ ' ' + filteredNums }}</span></a-button
      >
      <a-button @click="showColumn" icon="unordered-list" class="btns">设置列</a-button>
      <div class="right-btn">
        <a-button @click="actionAcconut('newAdd')" type="primary" class="btns"> +新建 </a-button>
      </div>
      <a-table
        row-key="id"
        :key="tableKey"
        size="middle"
        :scroll="{ x: scrollX, y: 'calc(100vh - 366px)' }"
        :columns="columns"
        :dataSource="modelList"
        :pagination="false"
        class="j-table-force-nowrap"
        :row-selection="{ selectedRowKeys: selectedRowKeys, columnTitle: ' ', onChange: onSelectChange }"
        @change="handleChange"
        :components="drag(columns, 'INSPECTION_PROJECT_LIST')"
      >
        <!-- 6个字符控制 超出。。。 -->
        <span :title="text" slot="projectName" slot-scope="text">
          {{  text }}
        </span>
        <!-- 15个字符控制 超出。。。 -->
        <span :title="text" slot="checkStandard" slot-scope="text">
          {{  text }}
        </span>
        <span slot="actions" slot-scope="text, record">
          <div style="width: 100%; height: 100%; background: #fff"></div>
          <span>
            <a @click="actionAcconut('edit', record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">删除</a>
          </span>
        </span>
        <!-- 输入框搜索 -->
        <div slot="searchInput" slot-scope="{ selectedKeys, confirm, clearFilters, column }" class="searchWorkOreder">
          <a-input
            placeholder="请输入"
            v-model="filterForm[column.dataIndex]"
            style="width: 188px; display: block"
            @pressEnter="handleSearch"
          />
          <a-button
            type="primary"
            style="width: 80px; margin-left: 20px; display: block"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex, clearFilters)"
          >
            搜索
          </a-button>
        </div>
        <a-icon
          slot="searchIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
      </a-table>
      <SetColumn
        columnName="设置列"
        ref="SetColumn"
        v-if="showSetColumn"
        @sureBtn="sureBtn"
        @cancelBtn="showSetColumn = false"
      />
    </a-card>
    <a-drawer placement="right" width="500" :visible="showFilter" @close="closeFilter">
      <div class="filter-body">
        <div slot="title" class="uni-card filter-tit">
          筛选 <span class="filter-num">{{ filteredNums }}</span>
        </div>
        <div class="uni-card" v-if="filteredNums > 0" style="background: #fff">
          <div v-for="(item, i) in filteredList" :key="i" v-show="item.text" class="tag-wrap">
            <span class="filter-tag" @click="delFiltered(item.key)">
              <span class="tag-text">{{ `${item.title}：${item.text}` }}</span>
              <a-icon type="close" style="float: right" />
            </span>
          </div>
        </div>
        <div style="overflow-y: scroll; flex: 1; padding: 0">
          <div class="uni-card" style="background: #fff">
            <a-form-model ref="ruleForm" layout="vertical" :model="filterForm">
              <a-form-model-item label="项目编号">
                <a-input v-model="filterForm.projectCode" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="项目名称">
                <a-input v-model="filterForm.projectName" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="检查标准">
                <a-input v-model="filterForm.checkStandard" placeholder="请输入" />
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
        <div class="footer-submit">
          <a-button class="margin-btn" @click="resetFilter">重置</a-button>
          <a-button type="primary" @click="handleFilter">确定</a-button>
        </div>
      </div>
    </a-drawer>
    <!-- 全选/分页 -->
    <div class="uni-card resetPadding" :style="{position: 'fixed', bottom:0,right:0,zIndex:2,left:collapsed?'79px':'208px', background: '#fff',paddingLeft:'43px'} ">
      <div style="display: inline-block">
        <a-checkbox :indeterminate="listIndeterminate" :checked="listCheckAll" @change="onCheckAllChange"></a-checkbox>
        <span style="margin-left: 8px">
          {{ `已选 ${selectedRowKeys.length}/${total} 项` }}
          <span @click="clearArr" class="pubColor" style="margin: 0 10px">清空</span>
          <span @click="handleDelete(selectedRowKeys)" class="pubColor" style="margin: 0 10px">批量删除</span>
        </span>
      </div>
      <div style="display: inline-block; float: right">
        <a-pagination
          :total="total"
          v-model="current"
          :page-size-options="pageSizeOptions"
          :page-size="pageSize"
          @change="onChangePage"
          @showSizeChange="onShowSizeChange"
          show-quick-jumper
          show-size-changer
        />
      </div>
    </div>
    <!-- 新增仓库||编辑 弹框 -->
    <a-modal
      v-model="addDialog"
      width="40%"
      :bodyStyle="{ padding: '32px 32px 24px', boxSizing: 'border-box' }"
      :maskClosable="false"
      :title="clickType == 'newAdd' ? '新建点巡检项目' : '编辑点巡检项目'"
      @cancel="cancelAdd"
    >
      <a-form-model ref="addForm" :model="newAddForm" :rules="addRules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item v-if="!isEdit" label="项目编号：" prop="projectCode">
          <a-input :disabled="isEdit" v-model="newAddForm.projectCode" placeholder="请输入" :maxLength="16" />
          <span class="btn-text code-btn" @click="genEntityCode" v-if="!isEdit">自动生成</span>
        </a-form-model-item>
        <a-form-model-item v-else prop="projectCodeTxt">
          <span class="projectCodeTxt" slot="label">项目编号</span>
          <span>{{ newAddForm.projectCode }}</span>
        </a-form-model-item>
        <a-form-model-item label="项目名称：" prop="projectName">
          <a-input v-model="newAddForm.projectName" placeholder="请输入" :maxLength=30 />
        </a-form-model-item>
        <a-form-model-item label="检查标准：" prop="checkStandard">
          <a-input v-model="newAddForm.checkStandard" placeholder="请输入" :maxLength=100 />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button @click="cancelAdd">取消</a-button>
        <a-button type="primary" :loading="accloading" @click="saveProject()">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import SetColumn from '@/pubComponent/SetColumn.vue'
import crumbs from '@/components/crumbs.vue'
import { getNewColumns, subStrText, camelCase2UnderLine, validateDuplicateValue } from '@/utils/util'
import { API } from '@/api/requestFzs'
import { APILX } from '@/api/requestLx'
import moment from 'dayjs'
import { mapState } from 'vuex'
import tableDragResize from '@/mixins/tableDragResize'
// 表头
const columnsValue = [
  {
    title: '项目编号',
    ellipsis: true,
    dataIndex: 'projectCode',
    width: 180,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'projectCode',
    },
  },
  {
    title: '项目名称',
    ellipsis: true,
    dataIndex: 'projectName',
    width: 180,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'projectName',
    },
  },
  {
    title: '检查标准',
    ellipsis: true,
    dataIndex: 'checkStandard',
    width: 180,
    scopedSlots: {
      filterDropdown: 'searchInput',
      filterIcon: 'searchIcon',
      customRender: 'checkStandard',
    },
  },
  {
    title: '创建时间',
    ellipsis: true,
    dataIndex: 'createTime',
    width: 180,
  },
  {
    title: '创建人',
    align: 'left',
    width: 150,
    ellipsis: true,
    dataIndex: 'createByText',
    scopedSlots: { customRender: 'createByText' },
  },
]
const actionArr = [
  {
    fixed: 'right',
    title: '操作',
    width: 110,
    align: 'left',
    dataIndex: 'actions',
    ellipsis: true,
    scopedSlots: { customRender: 'actions' },
  },
]
export default {
  name: 'warehouseList', //仓库管理列表
  mixins: [tableDragResize],
  data() {
    return {
      queryId: '',
      columnsValue,
      loginUser: '',
      submitApi: '',
      flowStatusList: [],
      statusList: [
        {
          value: 'no_effective',
          text: '未生效',
        },
        {
          value: 'effective',
          text: '已生效',
        },
      ],
      // 流程
      processDataVo: '',
      type: '0', //0是新增，1是编辑，2是详情
      id: 'WMS_WAREHOUSE', //此id用获取流程审批节点和获取详情中流程流转记录（注意：两者id并不相同）
      // 新建
      clickType: '',
      accloading: false,
      addDialog: false,
      newAddForm: {
        projectCode: '',
        projectName: '',
        checkStandard: '',
      },
      addRules: {
        projectName: [{ required: true, message: '请输入', trigger: 'change' }],
        projectCode: [
          { required: true, message: '请输入', trigger: 'change' },
          {
            message: '该编号已存在',
            validator: (rule, value, callback) =>
              validateDuplicateValue('mess_device_check_item', 'project_code', value, this.queryId, callback),
          },
        ],
        projectCodeTxt: [],
        checkStandard: [{ required: true, message: '请输入', trigger: 'change' }],
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      isEdit: false,
      dictOptions: '', //仓库分类字典下拉数据
      validateDuplicateValue, //自动生成编码
      //人员组件 提交人
      createStr: '',
      showCreateStr: '', //提交人
      moment,
      subStrText,
      selectedRowKeys: [],
      showFilter: false, // 筛选抽屉
      modelList: [], // 列表数据
      showSetColumn: false, // 显示
      // 排序
      sortForm: {
        sortType: '',
        sortColumn: '',
      },
      //全选按钮
      listIndeterminate: false,
      listCheckAll: false,
      current: 1,
      total: 0,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      columns: [
        {
          title: '项目编号',
          ellipsis: true,
          dataIndex: 'projectCode',
          width: 180,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'projectCode',
          },
        },
        {
          title: '项目名称',
          ellipsis: true,
          dataIndex: 'projectName',
          width: 180,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'projectName',
          },
        },
        {
          title: '检查标准',
          ellipsis: true,
          dataIndex: 'checkStandard',
          width: 180,
          scopedSlots: {
            filterDropdown: 'searchInput',
            filterIcon: 'searchIcon',
            customRender: 'checkStandard',
          },
        },
        {
          title: '创建时间',
          ellipsis: true,
          dataIndex: 'createTime',
          width: 180,
        },
        {
          title: '创建人',
          align: 'left',
          width: 150,
          ellipsis: true,
          dataIndex: 'createByText',
          scopedSlots: { customRender: 'createByText' },
        },
        // {
        //   fixed: 'right',
        //   title: '操作',
        //   width: 110,
        //   align: 'left',
        //   dataIndex: 'actions',
        //   ellipsis: true,
        //   scopedSlots: { customRender: 'actions' },
        // },
      ],
      filterForm: {
        projectCode: '', //项目编号
        projectName: '', //项目名称
        checkStandard: '', //检查标准
      },
      filteredFormLable: {
        projectCode: '项目编号',
        projectName: '项目名称',
        checkStandard: '检查标准',
      },
      flowStatus: {
        RUNNING: { text: '审批中', color: '#FF943E' },
        REFUSE: { text: '已拒绝', color: '#FF4D4F' },
        CANCELED: { text: '已撤回', color: '#888888' },
        AGREE: { text: '已通过', color: '#00B042' },
        TERMINATED: { text: '已终止', color: '#FF4D4F' },
      },
      userNames: '',
      dateForm: {},
      tableKey: 1.9
    }
  },
  components: {
    SetColumn,
    crumbs,
  },
  computed: {
    scrollX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }
      return xnum
    },
    ...mapState({
      collapsed: (state) => state.user.collapsed,
    }),
    filteredList() {
      let list = []
      for (let key in this.filterForm) {
        list.push({
          title: this.filteredFormLable[key],
          text: this.filterForm[key],
          key,
        })
      }
      return list
    },
    filteredNums(n) {
      let nums = 0
      console.log(this.filterForm, 'filteredNums')
      if (n) {
        for (let key in this.filterForm) {
          if (
            this.filterForm[key] != '' &&
            key != 'createBy' &&
            this.filterForm[key] != null &&
            this.filterForm[key] != undefined
          ) {
            nums += 1
          }
        }
      } else {
        for (let key in this.filterForm) {
          if (this.filterForm[key] != '' && this.filterForm[key] != null && this.filterForm[key] != undefined) {
            nums += 1
          }
        }
      }
      return nums
    },
  },
  created() {
    let user = localStorage.getItem('pro__Login_Userinfo')
    this.loginUser = JSON.parse(user).value.id
    this.initData()
    this.requestData()
  },
  mounted() {
    console.log('filteredNums:', this.filteredNums)
  },
  methods: {
    // 点击 新增||编辑 项目
    actionAcconut(type, item) {
      this.clickType = type
      this.submitApi = APILX.messCheckItemAdd
      if (type == 'edit') {
        this.submitApi = APILX.messCheckItemEdit
        this.isEdit = true
        console.log(item, 'item')
        for (let i in this.newAddForm) {
          this.newAddForm[i] = item[i]
        }
        this.newAddForm.id = item.id
        this.queryId = item.id
      } else {
        this.queryId = ''
        this.isEdit = false
        this.newAddForm = {
          projectCode: '',
          projectName: '',
          checkStandard: '',
        }
      }
      this.addDialog = true
    },
    // 点击 modal的取消按钮
    cancelAdd() {
      this.addDialog = false
      this.$refs.addForm.resetFields()
    },
    //点击 新增||编辑项目 的保存按钮
    saveProject() {
      console.log(this.queryId, 'formName')
      this.$refs.addForm.validate((valid) => {
        console.log(valid, 'valid+++')
        if (valid) {
          this.accloading = true
          let param = this.newAddForm
          console.log('param', param)
          this.submitApi(param)
            .then((res) => {
              if (res.code == 200) {
                this.$antdMessage.success(res.message)
                this.accloading = false
                this.cancelAdd()
                if (this.isEdit) {
                  this.requestData()
                } else {
                  this.handleSearch()
                }
              } else {
                this.$antdMessage.error(res.message)
                this.accloading = false
                this.cancelAdd()
              }
            })
            .finally(() => {
              this.accloading = false
              this.cancelAdd()
            })
        }
      })
    },
    // table
    /* 初始/加载设置列 */
    initData() {
      var oldValue = localStorage.getItem(this.BUSI_CONST.Entity.INSPECTION_PROJECT_LIST)
      this.columns = getNewColumns(this.columnsValue, JSON.parse(oldValue), actionArr, this.columns)
    },
    // table选择
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.checkBoxStatus()
    },
    // 全选
    onCheckAllChange(e) {
      if (e.target.checked) {
        for (let item of this.modelList) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.id
          })
          this.selectedRowKeys.push(item.id)
        }
      } else {
        for (let item of this.modelList) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            return each != item.id
          })
        }
      }
      this.checkBoxStatus()
    },
    // 清空
    clearArr() {
      this.selectedRowKeys = []
      this.checkBoxStatus()
    },
    checkBoxStatus() {
      if (this.selectedRowKeys.length == 0) {
        this.listIndeterminate = false
        this.listCheckAll = false
      } else {
        let tableIds = []
        for (let item of this.modelList) {
          tableIds.push(item.id)
        }
        let checkValue = this.isInclude(tableIds, this.selectedRowKeys)
        if (checkValue) {
          this.listIndeterminate = false
          this.listCheckAll = true
        } else {
          this.listIndeterminate = true
          this.listCheckAll = false
        }
      }
    },
    isInclude(aa, bb) {
      return aa.every((item) => {
        return bb.some((sub) => {
          return sub === item
        })
      })
    },
    /* 自动生成 */
    genEntityCode() {
      API.genEntityCode({ entityCode: 'MESS_DEVICE_CHECK_ITEM' }).then((res) => {
        if (res.code == 200) {
          this.newAddForm.projectCode = res.result
          this.$refs['addForm'].validateField(['projectCode'])
        } else {
          this.newAddForm.projectCode = ''
          this.$refs['addForm'].validateField(['projectCode'])
          this.$antdMessage.error(res.message)
        }
      })
    },
    /* 请求列表数据 */
    requestData() {
      let parameter = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...this.filterForm,
      }
      this.sessionParams = {
        filterForm: this.filterForm,
        current: this.current,
        pageSize: this.pageSize,
      }
      console.log(parameter, 'parameter')
      APILX.messCheckItemList(parameter).then((res) => {
        if (res.code == 200) {
          if (res.result.total) {
            this.total = res.result.total
          } else {
            this.total = 0
          }
          this.modelList = res.result.records
          // this.modelList.forEach(record => {
          // })
        }
      })
    },
    /* 打开设置列面板 */
    showColumn() {
      this.showSetColumn = true
      this.$nextTick(() => {
        this.$refs.SetColumn.paramsData(this.columnsValue, this.BUSI_CONST.Entity.INSPECTION_PROJECT_LIST, this.columns)
      })
    },
    /* 设置列 */
    sureBtn(emitArr) {
      this.columns = getNewColumns(this.columnsValue, emitArr, actionArr)
      console.log(this.columns)
      localStorage.setItem(this.BUSI_CONST.Entity.INSPECTION_PROJECT_LIST, JSON.stringify(emitArr))
      this.tableKey += 1
    },
    /* 删除、批量删除 */
    handleDelete(v) {
      console.log(v, 'v')
      if (v instanceof Array) {
        if (v.length > 0) {
          APILX.messCheckItemCheckItem(v.toString()).then((res) => {
            if (res.code == 200) {
              if (res.result) {
                this.handleToDelete(v)
              } else {
                this.$warning({
                  title: '该点巡检项目已被点巡检方案引用，无法删除',
                })
              }
            } else {
              this.$antdMessage.error(res.message)
            }
          })
        } else {
          this.$antdMessage.warning('请勾选需要批量删除的数据')
        }
      } else {
        APILX.messCheckItemCheckItem(v.id).then((res) => {
          if (res.code == 200) {
            if (res.result) {
              this.handleToDelete(v)
            } else {
              this.$warning({
                title: '该点巡检项目已被点巡检方案引用，无法删除',
              })
            }
          } else {
            this.$antdMessage.error(res.message)
          }
        })
      }
    },
    handleToDelete(v) {
      if (v instanceof Array) {
        let that = this
        that.$antdConfirm({
          title: '确定要删除点巡检项目吗?',
          content: `共选中${v.length}条点巡检项目`,
          onOk() {
            APILX.messCheckItemDeleteBatch(v.toString()).then((res) => {
              if (res.code == 200) {
                that.$antdMessage.success('删除成功！')
                that.handleSearch()
                that.clearArr()
              } else {
                that.$antdMessage.error(res.message)
              }
            })
          },
          onCancel() {},
        })
      } else {
        let that = this
        that.$antdConfirm({
          title: '确定要删除此点巡检项目吗?',
          content: ``,
          onOk() {
            APILX.messCheckItemDelete(v.id).then((res) => {
              if (res.code == 200) {
                that.$antdMessage.success('删除成功！')
                if (that.modelList.length === 1) {
                  that.current = that.current == 1 ? 1 : that.current - 1
                }
                that.requestData()
                that.clearArr()
              } else {
                that.$antdMessage.error(res.message)
              }
            })
          },
          onCancel() {},
        })
      }
    },
    /* 撤回 */
    handleWithdraw(v) {
      let that = this
      that.$antdConfirm({
        title: '撤回申请将被拒绝',
        content: `确定撤回吗？`,
        onOk() {
          APILX.operateRevoke({ flowInstId: v.flowInstId }).then((res) => {
            if (res.code == 200) {
              that.$antdMessage.success('撤回成功！')
              that.handleSearch()
            } else {
              that.$antdMessage.error(res.message)
            }
          })
        },
        onCancel() {},
      })
    },
    // 排序
    handleChange(pagination, filters, sorter, { currentDataSource }) {
      console.log('看看这是啥33：', sorter)
      if (sorter.order) {
        let sortType = ''
        if (sorter.order == 'ascend') {
          sortType = 'ASC'
        } else {
          sortType = 'DESC'
        }
        this.sortForm = {
          sortType: sortType,
          sortColumn: camelCase2UnderLine(sorter.columnKey),
        }
        this.requestData()
      } else {
        this.sortForm = {
          sortType: '',
          sortColumn: '',
        }
        this.requestData()
      }
    },
    setColor(s) {
      // console.log(s, 'ssssssssssssssss')
      let cor = {
        1: '#888888',
        2: '#1890FF',
        3: '#00B042',
      }
      return cor[s] || ''
    },
    checkColor(value) {
      if (value == 0) {
        return '#DFDFDF'
      } else if (value >= 100) {
        return '#00B042'
      } else {
        return '#1890FF'
      }
    },
    // 列头检索提示语
    checkPlaceholder(dataIndex) {
      // console.log(dataIndex, 'dataIndex')
      let str = ''
      switch (dataIndex) {
        case 'projectCode':
          str = '请输入项目编号'
          break
        case 'projectName':
          str = '请输入项目名称'
          break
        case 'checkStandard':
          str = '请输入检查标准'
          break
      }
      return str
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData()
    },
    onShowSizeChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData()
    },
    handleSearch(selectedKeys, confirm, dataIndex, clearFilters) {
      // confirm() //用来关闭搜索弹窗
      // clearFilters() //用来重置搜索内容
      // console.log('这都是啥00：', selectedKeys)
      // console.log('这都是啥11：', confirm)
      // console.log('这都是啥22：', dataIndex)
      // console.log('这都是啥33：', clearFilters)
      this.current = 1
      this.requestData()
    },
    /* 打开筛选 */
    handleShowFilter() {
      this.showFilter = true
    },
    /* 关闭筛选 */
    closeFilter() {
      this.showFilter = false
    },
    /* 确定筛选 */
    handleFilter() {
      this.handleSearch()
      this.showFilter = false
    },
    /* 删除已选 */
    delFiltered(key) {
      if (this.filteredFormLable[key] == '提交人') {
        this.createStr = ''
        this.showCreateStr = ''
        this.filterForm[key] = ''
      } else if (this.filteredFormLable[key] == '分类') {
        this.filterForm[key] = undefined
      } else {
        this.filterForm[key] = ''
      }
    },
    /* 重置筛选 */
    resetFilter() {
      this.filterForm = {
        projectCode: '', //项目编号
        projectName: '', //项目名称
        checkStandard: '',
      }
      // this.showFilter = false
      this.handleSearch()
    },
    //点击返回按钮
    goBack() {
      console.log('goback')
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.header {
  width: 150%;
  margin: -12px -12px @distance4;
}
.backBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .backC {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
.j-table-force-nowrap {
  margin-top: @distance1;
}
.btns {
  margin-left: @distance5;
}
.right-btn {
  float: right;
  display: flex;
  justify-content: flex-end;
}
.mg-left {
  margin-left: @distance3;
}
.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}
.filter-num {
  color: @normalFont;
}
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.margin-btn {
  margin-right: @distance5;
}
.filter-tag {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: @fontSize1;
  line-height: @fontSize1;
  max-width: 100%;
  background: @greyBg;
  color: @titFont;
  cursor: pointer;
  .tag-text {
    display: inline-block;
    padding-right: 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .anticon-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}
.tag-wrap:nth-of-type(n + 2) {
  margin-top: 10px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
/deep/ .ant-card-body {
  height: calc(100vh - 214px);
  overflow: hidden;
  padding: 20px 16px;
}
.code-btn {
  position: absolute;
  right: 10px;
  top: -11.5px;
}
body {
  overflow: hidden !important;
}
.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}
.projectCodeTxt {
  /deep/.ant-form-item-required::before {
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
  }
}
.projectCodeTxt::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
</style>
